<template>
  <div class="app-container">
    <div class="cashierTitle">
      <p>收银单管理</p>
      <div class="content">
        <span style="margin-right: 50px;">操作: 厦门瑞景店</span>
        <span>时间: {{new Date() | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
      </div>
    </div>
    <div class="cashierContent">
      <div class="cashierTableBox">
        <el-table  :key='tableKey' :data="list" border fit highlight-current-row>
          <el-table-column align="center" :label="tableTitle.commodityID" min-width="120px">
            <template slot-scope="scope">
              <span>{{scope.row.commodityID}}</span>
            </template>
          </el-table-column>
          <el-table-column width="130px" align="center" :label="tableTitle.commodityName">
            <template slot-scope="scope">
              <span>{{scope.row.commodityName}}</span>
            </template>
          </el-table-column>
          <el-table-column width="80px" align="center" :label="tableTitle.stock">
            <template slot-scope="scope">
              <span>{{scope.row.stock}}</span>
            </template>
          </el-table-column>
          <el-table-column width="110px" align="center" :label="tableTitle.specifications">
            <template slot-scope="scope">
              <span>{{scope.row.specifications}}</span>
            </template>
          </el-table-column>
          <el-table-column width="150px"  align="center" :label="tableTitle.number">
            <template slot-scope="scope">
              <el-input-number size="mini" v-model="scope.row.number"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column width="100px" align="center" :label="tableTitle.originalPrice">
            <template slot-scope="scope">
              <span>{{scope.row.originalPrice}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="tableTitle.discount" width="95">
            <template slot-scope="scope">
              <span style='color:red;'>{{scope.row.discount}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="tableTitle.discountPrice" width="100">
            <template slot-scope="scope">
              <span>{{scope.row.discountPrice}}</span>
              <!-- <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> -->
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" :label="tableTitle.commodityType">
            <template slot-scope="scope">
              <span>{{scope.row.commodityType}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('table.actions')" width="150" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">{{$t('table.delete')}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="cashierContentBottom">
        <div class="cashierAdd">
          <div class="line">收银单号: <span> MDSY201805090939098627996</span></div>
          <div class="line">购买人手机号: <span><el-input v-model="phone" placeholder="请输入手机号"></el-input></span></div>
          <div class="line">级别: <span></span>会员</div>
          <div class="line">折扣: <span></span>5.5折</div>
          <div class="line">商品款号: <span></span></div>
          <div class="line">商品数量: <span></span>0</div>
          <div class="line">零售价: <span></span>0.00</div>
          <div class="line">折后价格: <span></span>0.00</div>
        </div>
        <div class="cashierRemark"></div>
      </div>
    </div>

  </div>
</template>

<script>
import { parseTime } from '@/utils'
export default {
  watch: {
  },

  methods: {
    parseTime() {
      return parseTime
    }
  },

  data() {
    return {
      phone: '',
      tableKey: 0,
      list: [
        {
          commodityID: '142724202200699',
          commodityName: '八芒星系列手镯',
          stock: '300,000',
          specifications: '500ml  12/箱',
          number: 1,
          originalPrice: '1399.00',
          discount: '5.5折',
          discountPrice: '788.00',
          commodityType: '会员购买'
        }
      ],
      tableTitle: {
        commodityID: '商品款号',
        commodityName: '商品名称',
        stock: '库存',
        specifications: '规格',
        number: '数量',
        originalPrice: '零售价',
        discount: '折扣',
        discountPrice: '折后价',
        commodityType: '商品类型'
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.cashierTitle {
  background-color: #fff;
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ebeef5;

  p {
    font-size: 22px;
    font-weight: bold;
    padding: 0 20px;
  }
  span {
    margin: 20px;
  }
}
.cashierContent {
  background-color: #fff;
  .cashierTableBox {
    min-height: 300px;
    padding: 20px;
    width: 100%;

    border-bottom: 1px solid #ebeef5;

  }
  .cashierContentBottom {
    display: flex;
    .cashierAdd {
      flex: 0 0 50%;
      border-right: 1px solid #eee;
      padding: 20px 0px 20px 40px;
      .line {
        line-height: 35px;
        span: {
          color: red;
        }
      }
    }
    .cashierRemark {
      flex: 0 0 50%;

    }
  }
}
</style>

